<template>
	<view class="">
		<view class="flex flex-row" >
			<!-- <myQrcode :code="code" :width="200" :height="200" @onDone='qrcodeDone'></myQrcode> -->
			<PCanvas ref="canvas_p" canvasId="canvas_p" width="750" height="1240" unit='rpx' :options="options"></PCanvas>
		</view>
		<view class="p-10">
			<view class="w-full rounded-sm text-bold text-white text-center text-16" style=" height:80rpx; line-height: 80rpx; background-color: #006BFF;" @tap="getCanvasUrl">保存图片到相册</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import PCanvas from '/components/p-canvas/p-canvas.vue'
	import myQrcode from "@/components/my-qrcode/my-qrcode.vue";
	import request from '/utils/request.js'; 
	export default {
		components: {
			PCanvas,
			myQrcode
		},
		data() {
			return {
				finished: false,
				code: '',
				img_src: '',
				qrcode_src: '',
				options: [
					{
						shape: 'rect',
						x: 0,
						y: 0,
						w: 750,
						h: 1500,
						url: '/static/bg.png'
					},{
						shape: 'rect',
						x: 150,
						y: 910,
						w: 250,
						h: 200,
						url: '/static/logo2.png'
					},{
						shape: 'rect',
						x: 465,
						y: 940,
						fill: '#fff',
						w: 145,
						h: 145,
					}
				],
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad() {
			if(!this.userInfo.phone){
				uni.showToast({
					title: '请先登录',
					icon: 'none',
				})
				setTimeout(()=>{
					uni.navigateBack()
				}, 1000)
			}
			this.getQrcode(); 
		},
		
		onReachBottom() {
			
		},
		onShareAppMessage() {
			return {
			  title: '飞兔接单',
			  path: '/pages/task/list',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔接单',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			// 二维码绘制完成
			// qrcodeDone(qrcode){
			// 	this.qrcode_src = qrcode;
			// 	// 更新图片
			// 	this.options[2].url = this.qrcode_src
			// },
			getQrcode(){
				request.post('/pilot/qrcode').then(res=>{
					console.log(res)
					// this.options[2].url = res
					this.options.push({
						shape: 'image',
						x: 465,
						y: 940,
						w: 145,
						h: 145,
						url: res,
					})
				})
			},
			
			// 保存相册
			getCanvasUrl(){
				var that = this;
				// #ifdef MP-WEIXIN
				// 查看授权状态
				wx.getSetting({
				  success(res) {
					// 检查 'scope.writePhotosAlbum' 是否存在于 authSetting 对象中
					if (res.authSetting.hasOwnProperty('scope.writePhotosAlbum')) {
					  // 如果存在，说明之前已经请求过权限
					  if (res.authSetting['scope.writePhotosAlbum']) {
						console.log("用户已授权保存图片到系统相册");
						// 执行需要此权限的操作
						that.saveImage();
					  } else {
						console.log("用户拒绝了保存图片到系统相册的权限");
						// 提示用户去设置页面开启权限或处理用户拒绝的情况
						wx.showModal({
						  title: '温馨提示',
						  content: '需要您授权保存图片到系统相册的权限以继续操作',
						  success(modalRes) {
							if (modalRes.confirm) {
							  // 用户点击确定后跳转至小程序设置页面
							  wx.openSetting({
								success(settingData) {
								  // 再次检查设置结果
								  if (settingData.authSetting['scope.writePhotosAlbum']) {
									console.log("用户重新授权成功");
									that.saveImage();
								  } else {
									console.log("用户未重新授权");
								  }
								}
							  });
							}
						  }
						});
					  }
					} else {
					  // 'scope.writePhotosAlbum' 不存在于 authSetting 中，说明从未请求过该权限
					  console.log("尚未请求过保存图片到系统相册的权限");
					  // 请求用户授权
					  wx.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
						  console.log("用户同意授权保存图片到系统相册");
						  that.saveImage();
						},
						fail() {
						  console.log("用户拒绝授权保存图片到系统相册");
						  // 处理用户拒绝授权的情况
						}
					  })
					}
				  },
				  fail(err) {
					console.error("获取用户设置失败", err);
				  }
				});
				// #endif
			},
			
			// 保存相册 
			saveImage(){
				this.$refs.canvas_p.getCanvasUrl().then(res=>{
					this.img_src = res;
					// #ifndef H5
					uni.saveImageToPhotosAlbum({
						filePath: res,
						success(res) {
							uni.showToast({
								title: '已保存到相册',
								duration: 2000
							});
						}
					})
					// #endif
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F3F0;
	}
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
</style>
